<template>
	<view>
		<scroll-view
			scroll-y="true"
			class="scroll"
			:style="{ height: height + 'px' }"
			:scroll-top="screenTop"
		>
			<view class="top pl30">
				<view class="avatar dflex alc">
					<image src="../../pagesA/images/avatar.jpg" mode="widthFix"></image>
					<view class="fs36 white fw900 pl24">账号昵称</view>
				</view>
			</view>
			<!-- banner部分 -->
			<view class="banner dflex alc jcse borderbox">
				<view
					class="dflex flexc alc banner-item"
					v-for="(item, index) in bannerList"
					:key="index"
					@click="handerPath(item)"
				>
					<image :src="item.img" mode=""></image>
					<view class="pt10  fw500 color">{{ item.text }}</view>
				</view>
			</view>
			<!-- 数据同步部分 -->
			<view class="mt40 pl30">
				<subtitle title="数据同步"></subtitle>
				<view class="middle ml10 mt30">
					<view class="mid-item" v-for="(item, index) in dataList" :key="index">
						<CenterData :data="item"></CenterData>
						<view class="lines"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<tabbar :select="3"></tabbar>
	</view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar.vue';
import subtitle from '@/components/subtitle/subtitle.vue';
import CenterData from '../components/CenterData/CenterData.vue';
export default {
	components: {
		tabbar,
		subtitle,
		CenterData
	},
	data() {
		return {
			screenTop:0,
			height: '',
			dataList: [
				{
					id: 1,
					img: '../.././static/milkanmuxi.png',
					name: '安慕希酸奶',
					price: 25.8,
					stock: 1900
				},
				{
					id: 2,
					img: '../.././static/milkanmuxi.png',
					name: '巧克力酸奶',
					price: 19.8,
					stock: 1800
				},
				{
					id: 3,
					img: '../.././static/milkanmuxi.png',
					name: '鲜牛奶',
					price: 29.9,
					stock: 1700
				},
				{
					id: 4,
					img: '../.././static/milkanmuxi.png',
					name: '蒙牛酸奶',
					price: 25.8,
					stock: 1600
				},
				{
					id: 5,
					img: '../.././static/milkanmuxi.png',
					name: '安花花牛酸奶',
					price: 16.9,
					stock: 1500
				}
			],
			bannerList: [
				{
					id: 1,
					img: '/static/tabbar/master/order_select.png',
					text: '全部订单',
					path: '/pagesA/allorders/allorders'
				},
				{
					id: 2,
					img: '/static/tabbar/master/apply_select.png',
					text: '数量申报',
					path: '/pagesA/datadeclare/datadeclare'
				},
				{
					id: 3,
					img: '/static/tabbar/master/message_select.png',
					text: '订购信息',
					path: '/pagesA/ordersmessage/ordersmessage'
				},
				{
					id: 4,
					img: '/static/tabbar/master/shuju_select.png',
					text: '数据同步',
					path: '/pagesA/synchronization/synchronization'
				}
			]
		};
	},
	methods: {
		handerPath(item) {
			uni.navigateTo({
				url: item.path
			});
		}
	},
	onShow() {
		var that = this;
		uni.getSystemInfo({
			success(res) {
				that.height = res.windowHeight;
				that.screenTop=0
				console.log(that.screenTop);
			}
		});
	}
};
</script>

<style lang="scss">
page {
	background-color: #f9f9f9;
}
.top {
	width: 750rpx;
	height: 360rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	overflow: hidden;
	.avatar {
		margin-top: 128rpx;
		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}
}
.banner {
	width: 690rpx;
	height: 194rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 auto;
	margin-top: -88rpx;
	box-shadow: 0px 4px 16px 0px #999999;
	.banner-item {
		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
}
.middle {
	width: 670rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	.mid-item {
	}
	.mid-item:last-child {
		padding-bottom: 120rpx;
		.lines {
			display: none;
		}
	}
}
.lines {
	width: 590rpx;
	height: 2rpx;
	background-color: #eaeaea;
	margin: 0 auto;
	margin-top: 30rpx;
	margin-bottom: 40rpx;
}
</style>
